/* information box
*/
.el-alert {
  --el-alert-padding: 24px;
  --el-alert-border-radius-base: 8px;
  --el-alert-close-font-size: 20px;
  --el-alert-icon-size: 16px;
  --el-alert-icon-large-size: 24px;
  @apply border border-solid items-start;
  .el-alert__description {
    @apply text-body-1;
    &:first-child {
      margin-top: 0;
    }
  }
  .el-alert__close-btn {
    top: 24px;
    right: 20px;
  }
  &.is-light {
    .el-alert__description {
      color: var(--text-content-darkest);
    }
  }
}
.el-alert__content {
  padding-right: 16px;
}
.el-alert__title {
  @apply text-title-2;
  color: var(--text-content-darkest);
  &.is-bold {
    font-weight: 500;
  }
}
.el-alert--theme {
  background-color: var(--surface-tonal-rest);
  border-color: var(--stroke-border-cta-rest);
  &.show-icon {
    .el-alert__content {
      padding: 0;
    }
  }
}
.el-alert--success {
  --el-alert-bg-color: var(--surface-tonal-success);
  border-color: var(--stroke-border-cta-success);
}
.el-alert--info {
  --el-alert-bg-color: var(--surface-neutral-secondary-rest);
  border-color: var(--stroke-border-neutral-rest);
  &.is-light {
    color: var(--text-content-subtle);
  }
}
.el-alert--warning {
  --el-alert-bg-color: var(--surface-tonal-warning);
  border-color: var(--stroke-border-cta-warning);
}
.el-alert--error {
  --el-alert-bg-color: var(--surface-tonal-error);
  border-color: var(--stroke-border-cta-error);
}
